<template>
  <el-dialog :model-value="visible" width="42%"  @close="dialogClose">
    <!--标题-->
    <template #header>
      <div style="font-size:18px; color:#409eff; font-weight:bold;">修改工单</div>
    </template>

    <el-form :model="row" ref="formRef" :rules="formRules"  label-width="100" :inline="true">
      <!-- 配置idc选择，通过下拉框选择-->
      <el-form-item label="部门管理：" prop="department">
        <el-select class="m-2" v-model="row.department" @click="getDepartment" placeholder="请选择">
          <el-option v-for="row in department" :key="row.id" :label="`${row.name}`" :value="row.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目管理：" prop="project">
        <el-select class="m-2" v-model="row.project" @click="getProject" placeholder="请选择">
          <el-option v-for="row in project" :key="row.id" :label="`${row.name}`" :value="row.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="服务模块：" prop="server">
        <el-select class="m-2" v-model="row.server" @click="getServer" placeholder="请选择">
          <el-option v-for="row in server" :key="row.id" :label="`${row.name}`" :value="row.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="主版本号：" prop="master_version">
        <el-select class="m-2" v-model="row.master_version" @click="getMaster_Version" placeholder="请选择">
          <el-option v-for="row in master_version" :key="row.id" :label="`${row.name}`" :value="row.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态：" prop="status">
        <el-input v-model="row.status" suffix-icon="Edit" disabled></el-input>
      </el-form-item>
      <el-form-item label="申请人：" prop="applicant" >
        <el-input v-model="row.applicant" suffix-icon="Edit" disabled></el-input>
      </el-form-item>
      <el-form-item label="工单号：" prop="work_order_number">
        <el-input v-model="row.work_order_number" suffix-icon="Edit"></el-input>
      </el-form-item>
      <el-form-item label="子版本号：" prop="version">
        <el-input v-model="row.version" suffix-icon="Edit"></el-input>
      </el-form-item>
      <el-form-item label="优先级：" prop="priority">
        <el-select class="m-2" v-model="row.priority" placeholder="请选择">
          <el-option label="低" value="低" />
          <el-option label="一般" value="一般" />
          <el-option label="高" value="高" />
          <el-option label="紧急" value="紧急" />
        </el-select>
      </el-form-item>
      <el-form-item label="影响范围：" prop="reach">
        <el-select class="m-2" v-model="row.reach" placeholder="请选择">
          <el-option label="小" value="小" />
          <el-option label="一般" value="一般" />
          <el-option label="大" value="大" />
          <el-option label="不影响" value="不影响" />
        </el-select>
      </el-form-item>
      <el-form-item label="故障描述：" prop="fault_description">
        <el-input v-model="row.fault_description" type="textarea"  style="width: 233px;"></el-input>
      </el-form-item>
      <el-form-item label="故障原因：" >
        <el-input v-model="row.Fault_cause" type="textarea" style="width: 233px;"></el-input>
      </el-form-item>
      <el-form-item label="如何修改：">
        <el-input v-model="row.modify" type="textarea" style="width: 233px;"></el-input>
      </el-form-item>

      <el-form-item label="脚本：">
        <el-input v-model="row.script" type="textarea" style="width: 233px;"></el-input>
      </el-form-item>
      <el-form-item label="配置：">
        <el-input v-model="row.config" type="textarea" style="width: 233px;"></el-input>
      </el-form-item>
      <el-form-item label="回退原因：">
        <el-input v-model="row.fallback" type="textarea" style="width: 233px;"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogClose">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'UserCreate',
  // 介绍父组件的值
  props: {
    visible: Boolean, // 获取dialog是否打开变量
    row: {
      type: [Object,String,Number],
      default: 0
    }
  },
  data() {
    return {
      department: '',
      project: '',
      server: '',
      master_version: '',
      formRules: {
        department: [{ required: true, message: '请选择部门', trigger: 'change' }],
        project: [{ required: true, message: '请选择项目', trigger: 'change' }],
        server: [{ required: true, message: '请选择服务', trigger: 'change' }],
        master_version: [{ required: true, message: '请选择主版本号', trigger: 'change' }],
        status: [{ required: true, message: '请选择状态', trigger: 'change' }],
        priority: [{ required: true, message: '请选择优先级', trigger: 'change' }],
        reach: [{ required: true, message: '请选择影响范围', trigger: 'change' }],
        applicant: [
          { required: true, message: '请输入申请人', trigger: 'blur' },
          { min: 2, message: '用户名长度应不小于2个字符', trigger: 'blur' }
        ],
        work_order_number: [
          { required: true, message: '请输入工单号', trigger: 'blur' },
          { min: 2, message: '工单号长度应不小于2个字符', trigger: 'blur' }
        ],
        version: [
          { required: true, message: '请输入版本号', trigger: 'blur' },
          { min: 2, message: '版本号长度应不小于2个字符', trigger: 'blur' }
        ],
        fault_description: [
          { required: true, message: '请输入故障描述', trigger: 'blur' },
          { min: 2, message: '故障描述长度应不小于2个字符', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    submit() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          this.$http.put('api/my_work_order/' + this.row.id + '/', this.row).then(res => {
            if (res.data.code == 200) {
              this.$message.success('完成工单修改')
              // 重新获取数据
              this.dialogClose()
              this.$parent.GetAllMyWorkOrder() // 调用父组件方法，更新数据
            } else {
              this.$message.info('请求数据接口失败')
            }
          })
        } else {
          this.$message.error('格式错误！')
        }
      })
    },
    // 获取部门信息
    getDepartment() {
      this.$http.get('api/department/?page_size=100').then(res => {
        this.department = res.data.data
      })
    },
    // 获取项目信息
    getProject() {
      this.$http.get('api/project/?page_size=100').then(res => {
        this.project = res.data.data
      })
    },
    // 获取服务模块信息
    getServer() {
      this.$http.get('api/server/?page_size=1000').then(res => {
        this.server = res.data.data
      })
    },
    // 获取主版本号信息
    getMaster_Version() {
      this.$http.get('api/master_version/?page_size=1000').then(res => {
        this.master_version = res.data.data
      })
    },
    
    // 点击关闭，子组件通知父组件更新属性
    dialogClose() {
      this.$emit('update:visible', false) // 父组件必须使用v-model
    }
  },
   // 监听窗口打开，
   watch: {
    visible() {
      if (this.visible) {
        // 关闭窗口不请求
        this.$http.get('api/my_work_order/' + this.row.id + '/').then(res => {
          if (res.data.code == 200) {
            this.row.department = res.data.data.department.id
            this.row.project = res.data.data.project.id
            this.row.server = res.data.data.server.id
            this.row.master_version = res.data.data.master_version.id

            // 重新渲染编辑对话框IDC机房和主机分组
            this.getDepartment()
            this.getProject()
            this.getServer()
            this.getMaster_Version()
          }
        })
      }
    }
  }
}
</script>
